<template>
  <div>
    <div class="table-header">
      <Button type="primary" @click="toAssets(0)">填写审核</Button>
    </div>
    <Table border :columns="columns" :data="list">
      <template slot-scope="{ row }" slot="name">
        <strong>{{ row.name }}</strong>
      </template>
      <template slot-scope="{ row }" slot="status">
        <Tag :color="statusColor(row.status)">{{statusTag(row.status)}}</Tag>
      </template>
      <template slot-scope="{ row }" slot="action">
        <Button
          type="primary"
          size="small"
          style="margin-right: 5px"
          @click="toAssets(1, row)"
          >编辑</Button
        >
<!--        <Button type="error" size="small" @click="remove(index)">禁用</Button>-->
      </template>
    </Table>
    <Page
      :total="query.total"
      :page-size="query.pageSize"
      :current="query.page"
      @on-change="onChange"
      @on-page-size-change="onPageSizeChange"
      show-total
    />
    <AssetsEdit ref="assetsEditRef"></AssetsEdit>
  </div>
</template>
<script>
import AssetsEdit from './components/edit'
import { mapState, mapActions } from 'vuex'

export default {
  components: { AssetsEdit },
  data () {
    return {
      columns: [
        {
          title: '商家姓名',
          slot: 'name'
        },
        {
          title: '商家微信姓名',
          key: 'wx'
        },
        {
          title: '联系方式',
          key: 'tel'
        },
        {
          title: '注册地址',
          key: 'address'
        },
        {
          title: '提交时间',
          key: 'create_time'
        },
        {
          title: '状态',
          slot: 'status',
          width: 80
        },
        {
          title: '操作',
          slot: 'action',
          width: 180,
          align: 'center'
        }
      ]
    }
  },
  computed: {
    ...mapState('shop', ['list', 'query'])
  },
  methods: {
    ...mapActions('shop', ['_getShopList']),
    onChange (page) {
      const { total } = this.query
      // console.log(page)
      this.$store.commit('shop/SET_QUERY', {
        total,
        page
      })
      this.init()
    },
    onPageSizeChange (index) {
      const { total, page } = this.query
      this.$store.commit('shop/SET_QUERY', {
        total,
        pageSize: index,
        page
      })
      this.init()
    },
    remove (index) {},
    toAssets (index, row) {
      this.$refs.assetsEditRef.init({ index, row })
    },
    init () {
      const params = Object.assign(this.query, { review: true })
      this._getShopList(params)
    },
    statusTag (status) {
      // 0：禁用,1：审核中，2：审核通过；3：审核不通过
      switch (status) {
        case 0:
          return '已禁用'
        case 1:
          return '审核中'
        case 2:
          return '已通过'
        case 3:
          return '已驳回'
      }
    },
    statusColor (status) {
      // 0：禁用,1：审核中，2：审核通过；3：审核不通过
      switch (status) {
        case 0:
          return 'warning'
        case 1:
          return 'primary'
        case 2:
          return 'success'
        case 3:
          return 'error'
      }
    }
  },
  mounted () {
    this.init()
  }
}
</script>
<style lang="scss" scoped>
.table-header {
  position: relative;
  width: 100%;
  text-align: right;
  button {
    margin: 10px;
  }
}
</style>
